<template>
  <div>
    <div class="smsSet-container" v-loading="loading">
      <div class="smsSet-header">设备消息</div>
      <template v-for="item in switchList">
        <div class="smsSet-switch-item" :key="item.value">
          <span>{{ item.label }}</span>
          <el-switch
            v-model="valueForm[item.value]"
            :active-value="1"
            :inactive-value="0"
            @change="
              (val) => {
                handleValueChange(item, val)
              }
            "
          >
          </el-switch>
        </div>
      </template>
    </div>
    <div class="smsSet-buttons">
      <el-button type="primary" @click="goBack">返回</el-button>
    </div>
  </div>
</template>
<script>
import { getMessageSetting, setMessageSettings } from '@/api/login'
export default {
  name: 'smsSet',
  data() {
    return {
      loading: false,
      valueForm: {},
      switchList: [
        {
          label: '有活动消息时发送通知',
          value: 'activity',
        },
        {
          label: '有小易消息时发送通知',
          value: 'hycMsg',
        },
        {
          label: '设备失联时发送通知',
          value: 'devOutline',
        },
        {
          label: '设备故障时发送通知',
          value: 'devBreakdown',
        },
        {
          label: '设备高温时发送通知和短信',
          value: 'temperatureAlarm',
        },
        {
          label: '设备高温时发送短信给员工手机',
          value: 'temperatureStaffAlarm',
        },
        {
          label: '设备高温时发送短信给合作方手机',
          value: 'temperatureCooperateAlarm',
        },
      ],
    }
  },
  methods: {
    goBack() {
      this.$router.push('/myself/noticeList')
    },
    handleValueChange(item, val) {
      console.log(val)
      if (
        (item.value === 'temperatureAlarm' && val === 0) ||
        (item.value === 'temperatureStaffAlarm' && val === 0) ||
        (item.value === 'temperatureCooperateAlarm' && val === 0)
      ) {
        this.setWarningMessageSetting(item, val)
      } else {
        this.setMessageSetting({
          [item.value]: val,
        })
      }
      // if (this.valueForm.temperatureAlarm == 0 || this.valueForm.temperatureStaffAlarm == 0 || this.valueForm.temperatureCooperateAlarm == 0) {
      //   this.$confirm('当有设备高温时，将不能接受通知和短信，是否确认 ！', '温馨提示', {
      //     center: true,
      //     customClass: 'tip-dialog__wrapper',
      //   })
      //   .then(() => {
      //     this.setMessageSetting(this.valueForm)
      //   })
      // } else {
      //   this.setMessageSetting(this.valueForm)
      // }
    },
    setWarningMessageSetting(item, val) {
      this.$confirm(
        '当有设备高温时，将不能接受通知和短信，是否确认 ！',
        '温馨提示',
        {
          center: true,
          customClass: 'tip-dialog__wrapper',
        }
      )
        .then(() => {
          this.setMessageSetting({
            [item.value]: val,
          })
        })
        .catch(() => {
          this.valueForm[item.value] = 1
        })
    },
    setMessageSetting(params = {}) {
      setMessageSettings(params)
        .then(() => {
          this.$message({
            type: 'success',
            showClose: true,
            message: '更改成功',
          })
          this._getMessageSetting()
        })
        .catch((err) => {
          console.log(err)
        })
    },
    _getMessageSetting() {
      this.loading = true
      getMessageSetting()
        .then((res) => {
          this.valueForm = res
        })
        .catch((err) => {
          console.log(err)
        })
        .finally(() => {
          this.loading = false
        })
    },
  },
  mounted() {
    this._getMessageSetting()
  },
}
</script>
<style lang="scss" scoped>
.smsSet-container {
  font-size: 16px;
  width: 100%;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  color: #100625;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 10%);
  background-color: #fff;
  @media (min-width: 1200px) {
    width: 40%;
  }

  .smsSet-header {
    font-weight: bold;
    padding-bottom: 10px;
    border-bottom: 1px solid #e8e8e8;
  }

  .smsSet-switch-item {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
  }
}

.smsSet-buttons {
  padding-top: 10px;
}
</style>
